<template>
  <div class="my">
    <!-- 设置等功能项目 -->
    <div class="nanv">
      <div class="setting">
        <div
          class="imgs"
          v-for="(item, index) in setting"
          :key="index"
          @click="toshezhi"
        >
          <img :src="item.Image" alt="" />
        </div>
      </div>
      <div class="tobu">
        <div class="tobuTu">
          <!--背景图片 -->
          <div class="beijing">
            <van-image fit="fill" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          </div>

          <!-- 头像与昵称登录的时候显示 -->
          <div class="profile" v-if="this.$store.state.login && logos">
            <ul class="logo">
              <li class="avatar">
                <div>
                  <van-image
                    round
                    width="100%"
                    height="100%"
                    fit="fill"
                    :src="userInfo.avatar"
                  />
                </div>
              </li>
              <li class="name">
                <span class="nickname">{{ userInfo.nickname }}</span>
                <span class="bianji" @click="toInformation">编辑个人资料</span>
              </li>
            </ul>
          </div>

          <!-- 不登录的时候 -->
          <div class="profile" v-else>
            <ul class="logo">
              <li class="avatar">
                <div>
                  <van-image
                    round
                    width="100%"
                    height="100%"
                    fit="fill"
                    :src="require('../assets/gw.png')"
                  />
                </div>
              </li>
              <li class="name" @click="tologin">
                <span class="nicknamel">请登录</span>
                <!-- <span class="bianji" @click="toInformation">编辑个人资料</span> -->
              </li>
            </ul>
          </div>
        </div>

        <!-- 购物车订单啥的 -->
        <div class="wuliu">
          <!-- <Recommend :tobufenl="record"></Recommend> -->

          <div class="remen">
            <van-grid column-num="4" :border="false" :clickable="true">
              <van-grid-item
                v-for="(item, index) in record"
                :key="index"
                :icon="item.iconUrl"
                :text="item.name"
                :to="item.to"
                :badge="item.badge > 0 ? item.badge : ''"
             
              />
              <!-- 分类详情     :to="item.to ? item.to : '/fenlxiangqing'"-->
            </van-grid>
          </div>
        </div>
      </div>
      <div class="beij"></div>
    </div>
    <!--  -->

    <div class="beijyans">
      <div class="body">
        <!-- 小功能导航啥的 -->
        <div class="xiaogonn">
          <div style="height: 10px"></div>
          <div class="daohanger">
            <div class="remen">
              <van-grid column-num="4" :border="false" :clickable="true">
                <van-grid-item
                  v-for="(item, index) in lanmu"
                  :key="index"
                  :icon="item.iconUrl"
                  :text="item.name"
                  :badge="item.badge > 0 ? item.badge : ''"
                  :to="item.to"
                />
                <!-- 分类详情     :to="item.to ? item.to : '/fenlxiangqing'"-->
              </van-grid>
            </div>
          </div>
        </div>
      </div>

      <Tabbar></Tabbar>
    </div>
  </div>
</template>

<script>
import Recommend from "../components/Recommend/ToRecommend.vue";
import { Grid, GridItem } from "vant";
import { Image } from "vant";
import Tabbar from "@/components/Tabbar.vue";
import API from "../http/API.js";
import { Toast } from "vant";
export default {
  name: "my",
  components: {
    Tabbar,
    Recommend,
    [Image.name]: Image,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  data() {
    return {
      setting: [
        {
          Image: require("../assets/sz.png"),
        },
      ],
      userInfo: [],
      // 购物车待收货啥的
      record: [
        {
          iconUrl: require("../assets/fk.png"),
          // 数量

          name: "待付款",
          data: [],
          badge: "",
          to:"/orderForm/obligation"
        },
        {
          iconUrl: require("../assets/fh.png"),
          // 数量
  to:"/orderForm/deliver",
          name: "待发货",
          data: [],
          badge: "",
        },
        {
          iconUrl: require("../assets/sh.png"),
          // 数量

          name: "待收货",
          data: [],
          badge: "",
             to:"/orderForm/take"
        },
        {
          iconUrl: require("../assets/pj.png"),
          // 数量

          name: "待评价",
          data: [],
          badge: "",
              to:"/orderForm/evaluate"
        },
      ],
      lanmu: [
        {
          iconUrl: require("../assets/sc.png"),
          // 数量
          quantity: null,
          name: "收藏",
          to: "/collect",
        },
        {
          iconUrl: require("../assets/th.png"),
          // 数量
          quantity: null,
          name: "已评价",
          to: "/yipingjia",
        },
        {
          iconUrl: require("../assets/ll.png"),
          // 数量
          quantity: null,
          name: "浏览记录",
          to: "/browsing",
        },
        {
          iconUrl: require("../assets/kf.png"),
          // 数量
          quantity: null,
          name: "客服",
        },
      ],
      // 数量
      suliang: [],
      logos: false,
    };
  },
  provide() {
    return {
      reload: this.http,
    };
  },
  created() {
    this.yonh();
  },
  activated() {
    this.http();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    console.log(this.userInfo);
    // 模拟数据
    this.$store.commit("tokens", localStorage.getItem("token"));
  },
  mounted() {
    //  this.$refs.child.getMsg(this.lanmu)
  },
  methods: {
    tologin() {
      return this.$router.push("/login");
    },
    //拿到小红帽标志数量
    http() {
      for (let index = 0; index < this.record.length; index++) {
        this.$get(API.GET_ORDER_LIST, {
          token: localStorage.getItem("token"),
          showType: index + 1,
          // page:1,
        }).then((res) => {
          console.log(res)
          // this.suliang.push(res.data.list.length);
          if (res.errmsg == "请登录") {
            this.logos = false;
            return Toast("您还没有登录");
          }
          if (res.errmsg == "成功") {
            this.logos = true;
          }
          this.record[index].badge = res.data.list.length;
        });
      }
    },

    toshezhi() {
      this.$router.push("/shezhi");
    },
    https() {
      this.$get(API.GET_HOME_INFO, {}).then((res) => {
        if (res.errmsg == "请登录") {
          return this.$router.push("/login");
        }
        this.indexdata = res.data;
        // console.log(this.indexdata);
        this.$store.commit("indexdata", this.indexdata);
        this.show = false;
      });
    },
    // toForm(e) {
    //   if (this.$store.state.token != "") {
    //     this.$router.push({
    //       path: "/orderform",
    //       query: { index: e },
    //     });
    //   }
    // },
    // 去编辑个人资料
    toInformation() {
      console.log("1321564");
      this.$router.push("/information");
    },
    yonh() {
      this.$get(API.GET_AUTH_INFO, {
        token: this.$store.state.token,
      })
        .then((res) => {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
          console.log(res);
          this.shuax = false;
          this.information = res.data;
          console.log("成功");
          this.http();
          this.shuax = true;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.beijyans {
  flex: 1;
  background-color: #f1f1f1;
}
.my {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.nanv {
  height: 250px;
}
.setting {
  width: 100%;
  margin-top: 20px;
  // border: 1px solid #000;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  // justify-content: center;
  align-items: center;
  .imgs {
    width: 30px;
    height: 30px;
    // border: 1px solid #000;
    margin-right: 10px;
    img {
      width: 100%;
    }
  }
}
.tobu {
  width: 100%;
  height: 200px;
  // overflow: hidden;
  // border: 1px solid #000;
  position: relative;
  // border: 1px solid #000;
  .tobuTu {
    position: relative;
    width: 100%;
    height: 200px;
    .profile {
      position: absolute;
      bottom: 50px;
      left: 0px;
      // border: 1px solid #000;
      width: 100%;
      height: 70px;

      .logo {
        margin: 0 auto;
        margin-right: 10px;
        margin-left: 10px;
        height: 100%;
        display: flex;
        // border: 1px solid #000;
        li {
          display: flex;
          justify-content: center;
          // align-items: center;
          &:nth-child(2) {
            margin-left: 5px;
          }
        }
        .avatar {
          div {
            width: 97%;
            height: 97%;
          }
          width: 55px;
          height: 55px;
          border-radius: 50%;

          background-color: rgb(255, 255, 255);
          border: 1px solid rgb(223, 223, 223);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .name {
          // border: 1px solid #000;
          flex-direction: column;
          .nickname {
            display: block;
            font-size: 20px;
            font-weight: 530;
            padding: 5px 5px 5px 5px;
            border-radius: 5px;
            // background-color: rgba(235, 111, 111, 0.966);
            // border: 1px solid #000;
            color: rgba(240, 240, 240, 0.979);
          }
          .nicknamel {
            display: block;
            font-size: 20px;
            font-weight: 530;
            padding: 5px 5px 5px 5px;
            border-radius: 5px;
            background-color: rgba(235, 111, 111, 0.966);
            // border: 1px solid #000;
            color: rgba(240, 240, 240, 0.979);
          }
          .bianji {
            display: block;
            text-align: center;
            line-height: 20px;
            border-radius: 5px;
            color: rgb(255, 255, 255);
            margin-top: 5px;
            // border: 1px solid #000;
            padding-right: 3px;
            padding-left: 3px;
            height: 20px;
            background-color: rgba(192, 192, 192, 0.582);
          }
        }
      }
    }

    .beijing {
      width: 100%;
      height: 200px;
      overflow: hidden;
      position: absolute;
      z-index: -1;
      img {
        width: 100%;
      }
    }
  }
}
.wuliu {
  position: relative;
  bottom: 40px;
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 10px;
  overflow: hidden;
  // height: 50px;
  // border: 1px solid #000;
}
.beij {
  width: 100%;
  height: 50px;
  background: repeating-linear-gradient(to bottom, #ffffff, #eeeeee);

  // border: 1px solid #000;
}
.body {
  // background-color: #eeeeee;
  .xiaogonn {
    margin-right: 10px;
    // margin-top: 10px;

    margin-left: 10px;
    .daohanger {
      height: 100%;
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
    }
  }
}
</style>